<template>
  <div class='move'>
    <header>飞鼠体育</header>
    <nav>
      <div class="box">
        <ul class="nav-wrap">
          <li v-for="(item, index) in navList" :key="index" :class="current == index?'hover':''"
            @click="navBtn(item, index)">{{item.name}}</li>
        </ul>
      </div>
    </nav>
    <div class="move-content">
      <div class="banner-img">
        <swiper :options="swiperOption" ref="mySwiper" class="move-swiper">
          <!-- slides -->
          <swiper-slide v-for='(item,index) in bannerList' :key='index'><a :href="keyUrl+item.url"><img
                :src="keyUrl+(item.image.replace('-lp',''))"></a></swiper-slide>
          <!-- Optional controls -->
          <div class="swiper-pagination" slot="pagination"></div>
          <!-- <div class="swiper-button-prev" slot="button-prev"></div>
          <div class="swiper-button-next" slot="button-next"></div> -->
        </swiper>

      </div>

      <ul class="content-list">
        <li v-for="(items, index) in dataList" :key="index">
          <a :href="keyUrl+items.url">
            <div class="left">
              <p>{{items.title}}</p>
              <p>{{items.pubdate}}</p>
            </div>
            <img :src="keyUrl+items.image" alt="">
          </a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  var api = require('@/request/api');
  import {
    swiper,
    swiperSlide
  } from 'vue-awesome-swiper'

  export default {
    components: {
      swiper,
      swiperSlide
    },
    computed: {
      swiper() {
        return this.$refs.mySwiper.swiper
      }
    },
    data() {
      return {
        current: 0,
        dataList: [],
        bannerList: [],
        imgUrl: '',
        swiperOption: {
          autoplay: true,
          speed: 1000,
          loop: false,
          watchOverflow: true,
          pagination: {
            el: '.swiper-pagination',
            clickable: true
          },
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          },
        },
        navList: [{
            'api': 'getIndexOther',
            'banner': 'getIndexBanner',
            'name': '首页'
          },
          {
            'api': 'getOutfootMain',
            'banner': 'getOutfootBanner',
            'name': '国际足球'
          },
          {
            'api': 'getgnFootMain',
            'banner': 'getgnFootBanner',
            'name': '国内足球'
          },
          {
            'api': 'getYcMain',
            'banner': 'getYcMain',
            'name': '英超'
          },
          {
            'api': 'getCBAMain',
            'banner': 'getCBAPic',
            'name': 'CBA'
          },
          {
            'api': 'getNBAMain',
            'banner': 'getNBAPic',
            'name': 'NBA'
          },
          {
            'api': 'getTYMain',
            'banner': 'getTYBanner',
            'name': '综合体育专题'
          },
        ]
      };
    },
    methods: {
      navBtn(item, index) {
        this.current = index;
        let params = item.api;
        let banners = item.banner;
        api[params]().then((v) => {
          this.dataList = v.data;
          this.imgUrl = v.data[0].image;
        })
        api[banners]().then((v) => {
          this.bannerList = v.data.slice(0, 5);
        })
      }
      /*let params = this.$route.params.api;
      api[params]().then((v)=>{
        this.data = v.data
      })*/
    },
    created() {
      api['getIndexOther']().then(res => {
        this.dataList = res.data
        this.imgUrl = res.data[0].image;
      })
      api['getIndexBanner']().then(res => {
        this.bannerList = res.data.slice(0, 5);
      })
    },
    mounted(){
      if(!(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent))) {
        this.$router.push('/')
      } 
    }
  };

</script>

<style lang='scss' scoped>
  .move {
    width: 100%;

    header {
      height: 50px;
      font-size: 22px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: rgba(0, 0, 0, 1);
      line-height: 50px;
      text-align: center;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      background: #fff;
      z-index: 999;
    }

    nav {
      width: 100%;
      height: 50px;
      position: fixed;
      top: 50px;
      left: 0;
      right: 0;
      background: #fff;
      z-index: 999;


      .box {
        overflow-x: scroll;
        overflow-y: hidden;

      }

      .nav-wrap {

        width: 560px;
        display: flex;
        align-items: center;

        li {
          font-size: 15px;
          color: #000;
          box-sizing: border-box;
          padding: 10px 14px 5px;

          &.hover {
            font-size: 16px;
            font-weight: bold;
          }
        }

        .hover {
          font-size: 16px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: rgba(0, 0, 0, 1);
          border-bottom: 2px solid #FF0200;
        }
      }
    }

    .move-content {
      width: 100%;
      background: #F7F7F7;
      padding: 110px 0 10px;

      .banner-img {
        display: block;
        margin: 0 10px;

        .move-swiper {
          width: 346px;
          height: 174px;

          img {
            width: 100%;
            height: 100%;
          }
        }

      }

      .content-list {
          margin: 10px;

          li a {
            display: block;
            width: 100%;
            height: 84px;
            background: rgba(255, 255, 255, 1);
            border-radius: 4px;
            margin-bottom: 10px;
            font-size: 16px;
            font-family: PingFang-SC-Medium, PingFang-SC;
            font-weight: 500;
            color: rgba(0, 0, 0, 1);
            display: flex;
            padding: 10px;
            box-sizing: border-box;
            justify-content: space-between;

            img {
              width: 94px;
              height: 62px;
              border-radius: 4px;
            }

            .left {
              display: flex;
              flex-direction: column;
              justify-content: space-between;

            }
          }
        }

    }
  @media screen and (min-width: 375px) {
}

@media screen and (min-width: 1024px) {
  .nav-wrap {
    width: 100% !important;
    justify-content: space-around;
  }

  .move-content {
    .banner-img {
      width: 446px !important;
      height: 274px !important;

    }
  }
}

@media screen and (min-width : 768px) and (max-width : 1024px) {
  .nav-wrap {
    width: 100% !important;
    justify-content: space-around;
  }

  .move-content {
    .banner-img {
      width: 646px !important;
      height: 474px !important;
    }

    ul {
      width: 646px !important;

      li {
        height: 100px !important;

        img {
          width: 140px !important;
          height: 80px !important;

        }

      }
    }
  }
}

    }

</style>
